<template>
  <div>
    <div class="swiper-contaienr hidden-xs-only">
      <div class="swiper-content">
        <div class="swiper-title">
          <p>The History of AI Quantitative Trading</p>
          <!-- <p>Safe legal and compliant</p> -->
        </div>
        <div class="content">Transaction solutions</div>
      </div>
      <div style="width: 80%">
        <div class="contactBtn">Contact Us</div>
      </div>
    </div>
    <div class="swiper-contaienr2 hidden-sm-and-up">
      <div class="swiper-content">
        <div class="swiper-title">
          <p>The History of AI Quantitative Trading</p>
          <!-- <p>Safe legal and compliant</p> -->
        </div>
        <div class="content">Transaction solutions</div>
      </div>
      <div style="width: 80%">
        <div class="contactBtn">Contact Us</div>
      </div>
    </div>

    <div class="pg1">
      <div class="pg1-body">
        <span style="color: #c30d23">Our</span>&nbsp;&nbsp;company
      </div>
    </div>
    <div class="pg1">
      <div class="pg1-body-image">
        <img src="../static/images/PC/2/ps2.png" alt="" class="pg1-image1" />
      </div>
    </div>
    <div class="pg2">
      <div class="pg2-body">
        <div class="pg2-Item-container">
          <div class="pg2-title">The History of KODDPA</div>
          <div class="pg2-content">
            The history of KODDPA can be traced back several decades, and since
            its establishment, we have been committed to providing customers
            with the best trading experience. Our team is composed of a group of
            experienced financial professionals, with elites from various
            industries participating in research and development
          </div>
        </div>
        <div class="pg2-Item-container">
          <div class="pg2-title">AI Quantitative Trading Company of KODDPA</div>
          <div class="pg2-content">
            KODDPA is a leading AI quantitative trading company committed to
            combining artificial intelligence and quantitative trading to
            provide investors with innovative trading solutions.
          </div>
        </div>
        <div class="pg2-Item-container">
          <div class="pg2-title">Meeting diversified needs</div>
          <div class="pg2-content">
            AI quantitative trading can provide personalized investment plans
            and services based on the needs of investors. Whether pursuing
            long-term stable returns or short-term high-risk investments, AI
            quantitative trading can develop suitable investment strategies
            based on the needs of investors and meet diversified investment
            needs.
          </div>
        </div>
      </div>
    </div>

    <div class="pg3">
      <div class="pg3-body">
        <div class="pg3-image-container">
          <div>
            <img src="../static/images/PC/2/3.png" alt="" class="pg3-image">
          </div>
          <div>
            <img src="../static/images/PC/2/4.png" alt="" class="pg3-image">
          </div>
        </div>
        <div class="pg3-mid-title">
          Having the <span style="color:#C30D23;margin-left:8px;margin-right:8px;"> world’s top </span>team
        </div>
        <div class="pg3-mid-content">
          <div class="pg3-mid-content-body">
            Having the world’s top team, our team members possess extensive knowledge and professional skills in the financial field, including investment banking, asset management, risk management, and market analysis. They have rich experience and in-depth industry insights, able to accurately analyze market trends and predict future development directions. This enables us to provide clients with professional investment advice and customized solutions to achieve their investment goals.
          </div>
        </div>
      </div>
    </div>
    <bottom />
  </div>
</template>

<script>

import bottom from '@/components/bottom.vue'

export default {
  name: 'HomeView',
  components: {
    bottom
  }
}
</script>

<style lang="scss" scoped>
.pg3{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  margin-top: 50px;
  .pg3-body{
    width: 80%;
    .pg3-mid-content{
      display: flex;
      justify-content: center;
      font-size: 18px;
      color: #6A6A6A;
      font-weight: 400;
      .pg3-mid-content-body{
        width: 80%;
        margin-top: 20px;
      }
    }
    .pg3-mid-title{
      display: flex;
      justify-content: center;
      font-size: 50px;
      font-weight: 900;
      margin-top: 30px;
    }
    .pg3-image-container{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      .pg3-image{
        width: 100%;
      }
    }
  }
}
.pg2 {
  display: flex;
  justify-content: flex-end;
  .pg2-body {
    width: 85%;
    background: #ffffff;
    padding-bottom: 50px;
    box-shadow: 0px 20px 20px 0px rgba(199, 199, 199, 0.1608);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .pg2-Item-container {
      margin-top: 20px;
      width: 90%;
      .pg2-title {
        font-size: 28px;
        font-weight: 900;
      }
      .pg2-content {
        margin-top: 20px;
        font-size: 18px;
        color: #6a6a6a;
      }
    }
  }
}
.pg1 {
  display: flex;
  align-items: center;
  justify-content: center;
  .pg1-body{
    font-size: 50px;
    font-weight: 900;
  }
  
  margin-top: 53px;
  .pg1-body-image {
    width: 80%;
    .pg1-image1{
      width: 80%;
    }
  }
}
.swiper-contaienr2 {
  padding: 100px 0px 100px 0;
  background-image: url("../static/images/iphone/2/1.jpeg");
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  flex-direction: column;
  .swiper-content {
    color: #fff;
    width: 80%;
    .swiper-title {
      font-weight: 900;
      font-size: 50px;
    }
    .content {
      opacity: 0.8;
      font-weight: 500;
      margin-top: 20px;
      font-size: 16px;
    }
  }
  .contactBtn {
    color: #fff;
    background-color: #c30d23;
    margin-top: 20px;
    font-weight: 700;
    width: 161px;
    border-radius: 4px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.swiper-contaienr {
  padding: 200px 0px 200px 0;
  background-image: url("../static/images/PC/2/1.jpeg");
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  flex-direction: column;
  .swiper-content {
    color: #fff;
    width: 80%;
    .swiper-title {
      font-weight: 900;
      font-size: 50px;
    }
    .content {
      opacity: 0.8;
      font-weight: 500;
      margin-top: 20px;
      font-size: 32px;
    }
  }
  .contactBtn {
    color: #fff;
    background-color: #c30d23;
    margin-top: 20px;
    font-weight: 700;
    width: 161px;
    border-radius: 4px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 760px) {
  .swiper-content {
    width: 93% !important;
  }
  .swiper-title {
    font-size: 28px !important;
  }
  .pg1-body{
    font-size: 28px !important;
  }
  .pg2-title{
    font-size: 20px !important;
  }
  .pg2-content{
    font-size: 16px !important;
  }
  .pg3-mid-title{
    font-size: 20px !important;
  }
  .pg3-body{
    width: 90% !important;
  }
  .pg3-image-container{
    gap: 14px !important;
  }
  .pg3-mid-content-body{
    width: 90% !important;
  }
  .pg1-image1{
    width: 100% !important;
  }
}
</style>